﻿@using CRM.Admin.Areas.Customer.Controllers
@using CRM.Admin.Contracts.Dto.Sys
@{
    ViewBag.Title = "ServeMgAdd";
}
@section head
{
  <link href="@Url.Content("~/ScriptPlugin/easyui/themes/gray/easyui.css")" rel="stylesheet" />
<link href="@Url.Content("~/ScriptPlugin/easyui/themes/icon.css")" rel="stylesheet" />
<script type="text/javascript" src="@Url.Content("~/ScriptPlugin/easyui/jquery.easyui.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/ScriptPlugin/easyui/locale/easyui-lang-zh_CN.js")"></script>
<script type="text/javascript" src="@Url.Content("~/ScriptPlugin/xlayer/extend/layer.ext.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/KingsSharp.DataGrid.Filter.js")"></script>
<script src="@Url.Content("~/ScriptPlugin/WdatePicker/js/WdatePicker.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/form2json.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.validate.extended.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/picdata.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.linq.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/ScriptPlugin/webuploader/webuploader.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/KingsSharp.Uploader.js")"></script>
<style type="text/css">
    .uploader {
        text-align: center;
        float: left;
        width: 50px;
        height: 32px;
        line-height: 32px;
        color: blue;
    }

    .uploader-show {
        float: left;
        width: 70%;
        line-height: 32px;
    }

        .uploader-show a {
            margin-right: 5px;
            color: green;
        }

        .uploader-show img {
            width: 100%;
            height: 32px;
        }

            .uploader-show img.mulit {
                width: 32px;
                height: 32px;
                padding-right: 5px;
                border: 1px solid #fff;
                margin-left: 3px;
            }

            .uploader-show img.red {
                border: 1px solid red;
            }

        .uploader-show .imgBox .removeImg {
            margin-top: 9px;
            display: block;
            width: 40px;
            float: left;
            text-align: center;
        }

        .uploader-show .imgBox .hongcha {
            position: absolute;
            width: 13px !important;
            height: 13px !important;
            right: -10px;
            top: -5px;
            display: none;
        }

        .uploader-show .imgBox:hover .hongcha {
            display: block;
            cursor: pointer;
        }

        .uploader-show .imgBox {
            position: relative;
            width: 32px;
            float: left;
            margin-left: 10px;
        }
</style>
}


<form action="" id="ServeMgAddform">
    <div class="content-form" id="content-form">
        <table class="content-table">
            <tr>
                <th><span>服务分类</span></th>
                <td>
                    <input type="hidden" id="CustomerId" name="CustomerId" value="@ViewBag.CustomerId" />
                    <select id="Type" name="Type">
                        @{
                            List<DictionaryDto> lbdtos = new List<DictionaryDto>();
                            lbdtos = (List<DictionaryDto>)ViewData[ServeMgController.DicCatalogType.FWFL];
                            foreach (var dto in lbdtos)
                            {
                                <option value="@dto.Name">@dto.Name</option>
                            }
                        }
                    </select>
                </td>

                <th><span>排序</span></th>
                <td>
                    <div style="display: none">
                        <div id="pickerzero" class="uploader">
                            上传
                        </div>
                        <div class="uploader-show" data-mulit="true">

                        </div>
                    </div>
                    <input type="text" data-rule-number="true" data-rule-required="true" value="0" id="Order" name="Order"/>
                </td>
            </tr>

            <tr>
                <th >开始日期</th>
                <td>
                    <input type="text" maxlength="20" data-rule-dateTimeNow="true" id="StartDate" name="StartDate" class="p-icon-right p-icon-date" data-rule-required="true" readonly="readonly" />
                </td>
                <th>结束日期</th>
                <td>
                    <input type="text" maxlength="20" data-rule-dateTimeNow="true" id="EndDate" name="EndDate" class="p-icon-right p-icon-date" data-rule-required="true" readonly="readonly" />
                </td>
            </tr>
            <tr>
                <th>顾客方人员信息</th>
                <td>
                    <textarea rows="2" type="text" maxlength="200" id="CustomPerson" name="CustomPerson"></textarea>
                </td>
                <th>附件</th>
                <td>
                    <input type="hidden" id="CustomPersonPath" name="CustomPersonPath" />
                    <div id="picker1" class="uploader" data-type="file">
                        上传
                    </div>
                    <div class="uploader-show" data-mulit="true">

                    </div>
                </td>
            </tr>
            <tr>
                <th>攀钢服务人员信息</th>
                <td>
                    <textarea rows="2" type="text" maxlength="200" id="PgPerson" name="PgPerson"></textarea>
                </td>
                <th>附件</th>
                <td>
                    <input type="hidden" id="PgPersonPath" name="PgPersonPath" />
                    <div id="picker2" class="uploader" data-type="file">
                        上传
                    </div>
                    <div class="uploader-show" data-mulit="true">

                    </div>
                </td>
            </tr>
            <tr>
                <th>服务报告</th>
                <td>
                    <textarea rows="2" type="text" maxlength="200" id="Report" name="Report"></textarea>
                </td>
                <th>附件</th>
                <td>
                    <input type="hidden" id="ReportPath" name="ReportPath" />
                    <div id="picker3" class="uploader" data-type="file">
                        上传
                    </div>
                    <div class="uploader-show" data-mulit="true">

                    </div>
                </td>
            </tr>

        </table>
    </div>
</form>
@section foot
{
    <script type="text/javascript">

        function SaveData(index) {
            if ($("#ServeMgAddform").valid()) {
                //表单序列化
                var dto = $('#ServeMgAddform').serializeArray();
                K.AjaxJson("@Url.Content("~/Customer/ServeMg/ServeMgInsert")", dto, function (result) {
                    parent.K.layer.callback(index, result, dto);
                    parent.K.layer.close(index);
                });
            }

        }
    </script>

<script type="text/javascript">
        var uploaders = [];
        $(".uploader").each(function() {
            var that = $(this);
            var fileType = $(this).attr("data-type");
            var imgshow = that.parent().find(".uploader-show");
            var urlhidden = that.parent().find("input[type='hidden']");
            var pickid = "#" + that.prop("id");
            var ismulit = false;
            var fileInputName = "file";
            if (urlhidden) {
                fileInputName = urlhidden.prop("name");
            }
            if (imgshow.attr("data-mulit")) {
                ismulit = true;
            }

            var parameter = {
                swf: '@Url.Content("~/ScriptPlugin/webuploader/Uploader.swf")',
                server: '@Url.Content("~/Customer/CustomerInfo/UploaderProcess")',
                pick: {
                    id: pickid,
                    multiple: ismulit
                },
                resize: false,
                auto: true,
                fileVal: fileInputName
            };
            var eventer = {
                fileQueued: function(file) {
                    if (fileType && fileType === "file") {
                        if (ismulit) {
                            imgshow.append("（<a>" + file.name + "</a>）");
                        } else {
                            imgshow.html("（<a>" + file.name + "</a>）");
                        }
                    } else {
                        uploader.makeThumb(file, function(error, ret) {
                            if (error) {
                                imgshow.html("预览错误");
                            } else {
                                if (ismulit) {
                                    imgshow.append("<img src=\"" + ret + "\" class=\"mulit\" />");
                                } else {
                                    imgshow.html("<img src=\"" + ret + "\" />");
                                }
                            }
                        });
                    }
                },
                uploadSuccess: function(file, response) {
                    if (response.Filish) {
                        if (ismulit) {
                            var oldval = urlhidden.val();
                            if (oldval != "") {
                                oldval += ",";
                            }
                            urlhidden.val(oldval + response.Path);
                        } else {
                            urlhidden.val(response.Path);
                        }
                    }
                },
                uploadError: function() {
                    K.Alert("上传出错");
                }
            };
            if (fileType && fileType === "file") {
                var uploader = new K.Uploader().createFile(parameter, eventer);
                uploaders.push(uploader);
            } else {
                var uploader = new K.Uploader().createImage(parameter, eventer);
                uploaders.push(uploader);
            }
        });
    //查看大图
    function showBigImg(obj) {
        var json = {
            "data": [
                {
                    "src": obj.attr("src"), //原图地址
                }
            ]
        };
        layer.photos({
            photos: json
        });
    }
    //删除图片
    function removeImg(obj) {
        var imgUrlStr = obj.closest("td").find("input[type=hidden]");
        var imgUrlArr = imgUrlStr.val().split(",");
        imgUrlArr.splice(obj.parent().index(), 1);
        obj.parent().remove();
        K.Alert("删除成功");
        $("#" + imgUrlStr.attr("id")).val(imgUrlArr.toString());
    }
</script>

}